خصائص الحدود في الـ CSS <br />خواص الحدود في الـ CSS تسمح لك أن تحدد نمط و عرض و لون الحدود لأي عنصر HTML <br />أولا الخاصية border-style : <br />الخاصية border-style تحدد نمط الحد الذي ينبغي أن يعرض عليه الحد و هذه الخاصية تمتلك القيم التالية : <br />1. Dotted : نوع الحد منقط <br />2. Dashed : نوع الحد متقطع <br />3. Solid : نوع الحد متصل <br />4. Double : نوع الحد مزدوج <br />5. Groove : نوع الحد ثلاثي الأبعاد محفور ( يعتمد التأثير على قيمة لون الحد ) <br />6. Ridge : نوع الحد ثلاثي الأبعاد بارز ( يعتمدالتأثيرعلىقيمةلونالحد ) <br />7. Inset : نوع الحد ثلاثي الأبعاد مدرج ( يعتمدالتأثيرعلىقيمةلونالحد ) <br />8. Outset : نوع الحد ثلاثي الأعاد بارز ( يعتمدالتأثيرعلىقيمةلونالحد ) <br />9. None : نوع الحد لايملك أي قيمة <br />10. Hidden : نوع الحد مخفي <br />الخاصية border-style ممكن أن تكون من واحد إلى أربع قيم ( حد علوي , حد يميني , حد سفلي , حد يساري ) <br />و المثال التالي يبين القيم المختلفة لنمط الحدود <br />ملاحظة : أي من خصائص الـ CSS التي سوف يتم توضيحها لن يكون لها أي تأثير أو قيمة ما بم يتم تعيين قيمة للخاصية border-style . <br />ثانيا الخاصية عرض الحدود border-width <br />الخاصية border-width تحدد عرض الحدود للأطراف الأربعة ( علوي , يميني , سفلي , يساري ) <br />يمكن تعيين عرض الحدود بحجم معين من خلال وحدات قياس متعدد ( px,pt,cm,mm,em ….. ) <br />أو باستخدام إحدى القيم الثلاثة المخزنة مسبقا ( thick , medium , thin ) <br />الخاصية border-width ممكن أن تكون من واحد إلى أبع قيم ( علوي , يميني , سفلي , يساري ) <br />ثالثا الخاصية لون الحدود border-color <br />الخاصية border-color تستخدم لتعيين اللون للحدود الأربعة و يمكن أن يتم تعيين اللون للحدود بالأساليب التالية : <br />1. اسم اللون : تعيين اسم لون قياسي red <br />2. القيم الست عشرية : hex مثل #ff0000 <br />3. قيم RGB مثل rgb(255,0,0) <br />و الخاصية لون الحدود border-color ممكن أن تكون من واحد إلى أربع قيم (علوي , يميني , سفلي , يساري ) <br />ملاحظة : إذا لم يتم تعيين قيمة للخاصية border-color فإنه يرث لون العنصر الأب <br />رابعا الحدود – الجوانب الفردية <br /> من خلال المثال التالي يمكننا أن نرى أنه من الممكن تعيين قيم مختلفة للحدود و لكل طرف على حدا <br />في الـ CSS يوجد أيضا خصائص لتعيين كل حد ( علوي , يميني , سفلي , يساري ) <br />Border-top-style:dotted; <br />border-right-style:solid; <br />border-bottom-style:dotted; <br />border-left-style:solid; <br />و المثال التالي يعطي نفس النتيجة و لكن بطريقة مختلفة و سنتعرف على كافة تلك الخصائص في وقت لاحق من هذه الدرس : <br />Border-style:dotted solid ; <br />إذا كانت الخاصة تملك أربع قيم فإنها التأصر يطبق وفق الترتيب التالي <br />علوي يمين سفلي يسار <br />إذا كانت الخاصة تملك ثلاث قيم فإن الترتيب هو التالي <br />علوي يمني سفلي <br />إذا كانت الخاصية تملك قيمتين فإن الترتيب كالتالي <br />علوي سفلي و يميني يساري <br />إذا كانت الخاصية تملك قيمة واحدة فإنها تطبق على الجوانب الأربعة <br />خامسا خصائص الحدود المختصرة : <br />كما رأينا في قسم الحدود الجوانب الفردية السابقة الذكر هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الحدود <br />لاختصار الكود البرمجي من الممكن تحديد جميع خصائص الحدود الفردية في خاصية واحدة <br />و خصائص الحدود المختصرة تتبع الترتيب التالي : <br />1. عرض الحدود border-width <br />2. نمط الحدود border-style ( وهو مطلوب ) <br />3. لون الحدود border-color <br />مثال : <br />P{border : 5px solid red ; } <br />و يمكننا أيضا استخدام اختصار الكود لكل جانب على حدة كما في المثال التالي : <br />P{border-top : 5px solid blue ; } <br />سادسا الحدود المستديرة <br />الخاصية border-radius تستعمل لإستدارة الحدود لعنصر ما <br />لإضافة حدود مستديرة لعنصر ما نقوم باتباع ما يلي : <br />P{ border-style : solid ; <br /> border-radius : 5px ; <br /> } <br />ملاحظة : الخاصية border-radius غير مدعوم في المتصفح الإنترنت إكسبلولر 8 و ما قبله <br />سابعا المزيد من التطبيقات على الحدود <br />مثال 1 <br />جميع خصائص الحد العلوي في تصريح واحد <br />يوضح هذا المثال اختصار الكود لتعيين كافة خصائص الحد العلوي في تصريح واحد <br />P { border-top : thick solid blue ; } <br />مثال 2 <br />تعيين نمط الحد السفلي <br />هذا المثال يوضح كيفية تعيين نمط الحد السفلي <br />P { border-bottom : 5px dotted red ; } <br />مثال 3 <br />تعيين عرض الحد اليساري <br />هذا المثال يوضح كيفية تعيين عرض الحد اليساري <br />P { border-style : solid ; <br /> border-left-width : 10px ; <br /> } <br />مثال 4 <br />تعيين لون الحدود الأربعة <br />هذا المثال يوضح كيف يمكننا تعيين لون الحدود الأربعة بطرق مختلفة <br />P { border-style : solid ; <br /> border-color : red blue green black ; <br /> } <br />p.tow { <br /> border-style : solid ; <br /> border-top-color : red ; <br /> border-right-color : green ; <br /> border-bottom-color : blue ; <br /> border-left-color : black ; <br /> } <br />مثال 5 <br />تعيين لون الحد اليميني <br />هذا المثال يوضح كيفية تعيين لون الحد اليميني <br />P { border-style : solid ; <br /> border-right-color : #0000ff ; <br /> }
